<template>
  <div class="personalized">
    <div class="personalized-Top">
      <h3>{{ title }}</h3>
    </div>
    <div class="personalized-bottom">
      <div
        class="item"
        v-for="i in resultArr"
        :key="i.id"
        @click="toDetail(i.id)"
      >
        <img v-lazy="i.picUrl" alt="" />
        <p>{{ i.name }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    resultArr: {
      type: Array,
      default: () => [],
      require: true
    },
    title: {
      type: String,
      default: '',
      require: true
    },
    typeClass: {
      type: String,
      default: '',
      require: true
    }
  },
  methods: {
    toDetail (id) {
      this.$emit('toDetailInfo', id, this.typeClass)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/mixin.scss";
@import "@/assets/css/variable.scss";
.personalized {
  @include bg_sub_color();
}
.personalized-Top {
  width: 100%;
  height: 84px;
  @include bg_sub_color();
  border-bottom: 1px solid #ccc;
  padding: 0 20px;
  h3 {
    line-height: 84px;
    @include font_size($font_large);
    @include font_color();
  }
}
.personalized-bottom {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 20px 0;
  .item {
    width: 200px;
    padding-bottom: 20px;
    img {
      width: 200px;
      border-radius: 20px;
      height: 200px;
    }
    p {
      @include clamp(2);
      @include font_color();
      @include font_size($font_medium_s);
      text-align: center;
    }
  }
}
</style>
